<!--
 * @Author: your name
 * @Date: 2020-09-18 09:31:02
 * @LastEditTime: 2020-11-20 10:02:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \supplyweb\src\App.vue
-->
<template>
    <div id="app">
        <APPHeader v-if="ShowHeader"></APPHeader>
        <a-config-provider :locale="locale">
            <router-view v-on:header="header" v-on:footer="footer" />
        </a-config-provider>
        <APPFooter v-if="ShowFooter"></APPFooter>

        <!-- 签署信用承诺函弹框 -->
        <a-modal title="签署信用承诺函" :width="700" okText="签署" dialogClass="golbar" :closable="false" :visible="myvisible"
            :confirm-loading="confirmLoading" cancelText="取消" @ok="submit" @cancel="handleCancel"
            :bodyStyle="{ color: '' }">
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    取消
                </a-button>
                <a-button key="submit" type="primary" :disabled="DisabledSign" @click="submit">
                    签署
                </a-button>
            </template>
            <div class="top-title">主动公示型信用承诺书</div>
            <div class="xieyi_main">
                <p>为加快推进我国社会信用体系建设，加强企业诚信自律，逐步建立企业诚信经营长效机制，营造良好的市场环境，我单位<span class="blue"> {{ EntInfo.name }}</span>
                    社会信用代码 <span class="blue">{{ EntInfo.code }}</span>，公开向社会承诺：</p>
                <p>一、严格执行国家有关的法律法规，依法经营，自觉维护市场经营活动正常秩序，不违背社会公德。</p>
                <p>二、遵循公平、公开.公正的竞争原则，不搞不正当竞争，严格履行承诺，信守合同。</p>
                <p>三、加强企业管理，做好教育培训工作，培育诚信经营和积极向上的企业文化。</p>
                <p>四、依法纳税，自觉参加各类公益活动，积极承担社会责任。</p>
                <p>五、自愿接受社会各界对本单位经营活动的监督。</p>
                <p>六、本《信用承诺书》同意向社会公开。</p>
                <a-checkbox class="ml-32 mt-30 check_title" v-model="checked">
                    我已阅读并同意签署信用承诺函
                </a-checkbox>
            </div>
        </a-modal>
        <!-- 签署信用承诺函手机验证弹框 -->
        <a-modal title="签署信用承诺函" :width="700" okText="签署" cancelText="取消" dialogClass="golbar" :closable="false"
            :visible="mobileVis" :confirm-loading="mobileLoading" @ok="mobileSign" @cancel="mobileSingCancel">
            <template slot="footer">
                <a-button key="back" @click="mobileSingCancel">
                    取消
                </a-button>
                <a-button key="submit" type="primary" :disabled="isMobileDis" @click="mobileSign">
                    签署
                </a-button>
            </template>
            <div class="top-title">请输入短信验证码，完成签署</div>
            <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" class="mt-30">
                <a-form-item label="手机号码">
                    <a-input v-decorator="[
                        'phone',
                        {
                            rules: [{ required: true, message: '请输入手机号码' },
                            {
                                pattern: /^1[3456789]\d{9}$/,
                                message: '手机号码格式不正确'
                            }]
                        }
                    ]" />
                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="验证码">
                    <a-row :gutter="8">
                        <a-col :span="12">
                            <a-input placeholder="请输入验证码" v-decorator="[
                                'verifyCode',
                                { rules: [{ required: true, message: '请输入验证码' }] },
                            ]" />
                        </a-col>
                        <a-col :span="12">
                            <a-button style="width:100%" :disabled="IsDisabled" @click="getCode" type="primary">
                                {{ sec == 0 ? '获取用户验证码' : '还有' + sec + '秒' }}
                            </a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-spin v-bind="loadingProps" class="loading_pos" style="position: fixed;top: '50%'; bottom: '50%';"></a-spin>

    </div>
</template>
<script>
import APPHeader from '@/components/header'; //头部
import APPFooter from '@/components/footer'; //底部
import { getToken, setIsSign, getCookiesUserInfo } from '@/utils/auth'; // get token from cookie

import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { getVerifiyCode, checkVerifiyCode, ProofSign } from '@/apis/user/Sign';
import { getEntBaseInfo } from '@/apis/user/EntBaseInfo';
import { getCompaynInfo, editCompanyInfo } from "@/apis/com/company"
import moment from 'moment';
import Vue from "vue";
import 'moment/locale/zh-cn';
export default {
    data () {
        return {
            ShowHeader: true,
            ShowFooter: true,
            locale: zhCN,
            localeval: 'zh-cn',
            checked: false,
            IsDisabled: false,
            visible: false,
            confirmLoading: false,
            isMobileDis: false,
            mobileVis: false,
            mobileLoading: false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            formItemLayout: {
                labelCol: { sm: { span: 6 } },
                wrapperCol: { sm: { span: 14 } },
            },
            DisabledSign: false,
            EntInfo: {},
            DataTime: '',
            // 倒计时的秒数
            sec: 0,
            gettime: '', //当前时间
            loadingProps: {
                spinning: false
            }
        };
    },
    beforeCreate () {
        Vue.prototype.$app = this
    },

    computed: {
        myvisible () {
            // 通过 store.state 来获取状态对象
            if (
                this.$store.state.issign == true ||
                this.$store.state.issign == 'true'
            ) {
                return true;
            } else {
                return false;
            }
        },
    },
    components: {
        APPHeader,
        APPFooter,
    },
    created () {
        setTimeout(() => {
            if (getToken()) {
                this.getEntBaseInfo();
            }
        }, 500);
    },
    // watch监听对象及对应值的变化
    watch: {
        $route (to, from) {
            if (to.meta.footer == false) {
                this.ShowFooter = false;
            } else {
                this.ShowFooter = true;
            }
            if (to.meta.header == false) {
                this.ShowHeader = false;
            } else {
                this.ShowHeader = true;
            }
        },
    },

    methods: {
        //是否显示头部
        header: function (bool) {
            this.ShowHeader = bool;
        },
        //是否显示底部
        footer: function (bool) {
            this.ShowFooter = bool;
        },
        moment,
        changeLocale (localeval) {
            this.localeval = localeval;
            if (localeval === EN) {
                moment.locale(EN);
                this.$i18n.locale = EN;
                this.locale = null;
            } else {
                moment.locale(ZH);
                this.$i18n.locale = ZH;
                this.locale = zhCN;
            }
        },
        showGolbarModal () {
            this.visible = true;
        },
        //取消按钮
        handleCancel (e) {
            this.visible = false;
            this.$store.state.issign = false;
            setIsSign(false);
            this.sec = 0;
        },
        mobileSingCancel (e) {
            this.mobileVis = false
        },
        //获取验证码
        getCode () {
            //只校验手机号字段,校验通过才发送短信
            this.form.validateFields(['phone'], (err, values) => {
                if (!err) {
                    let params = {
                        mobile: values.phone,
                        type: 1,
                    };
                    this.IsDisabled = true;
                    const timeout = 60;
                    getVerifiyCode(params).then(res => {
                        if (res.code == 200) {
                            this.$message.success('短信发送成功,注意查收!');
                            this.sec = timeout;
                            // 写一个每隔一秒触发的计时器,避免小于0
                            let timerID = setInterval(() => {
                                if (this.sec > 0 && this.sec <= timeout) {
                                    this.sec--;
                                } else {
                                    this.sec = 0;
                                    this.IsDisabled = false;
                                    clearInterval(timerID);
                                }
                            }, 1000);
                        } else {
                            this.$message.error(res.msg);
                            this.IsDisabled = false;
                        }
                    }).catch(err => {
                        if (err) {
                            this.$message.error('获取短信失败!!!')
                            this.IsDisabled = false
                        }
                    });
                }
            });
        },
        //提交验证表单
        submit () {
            if (this.checked == true) {
                /**手机验证码 */
                // this.mobileVis = true
                // this.form.getFieldDecorator('phone', { initialValue: this.EntInfo.phone ? this.EntInfo.phone : '' })


                // TODO 暂时直接签署成功
                this.EntInfo.status = 0;
                editCompanyInfo(this.EntInfo).then(res => {
                    if (res.code == 200) {
                        this.visible = false;
                        this.myvisible = false;
                        this.$store.state.issign = false
                        setIsSign(true);
                        this.$message.success('签署成功');
                        this.getEntBaseInfo();
                        setUser
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(err => {
                })

            } else {
                this.$message.warning('请勾选签署信用承诺函');
            }
        },

        // 获取企业基本信息
        getEntBaseInfo () {
            const id = JSON.parse(getCookiesUserInfo()).companyId
            getCompaynInfo(id)
                .then(res => {
                    if (res.code == 200) {
                        this.EntInfo = res.data;
                        //   localStorage.setItem('IsSign', res.data.status); 另开字段存储博雅的承诺函状态
                    }
                })
                .catch(error => { });
        },
        // 手机验证码签署
        mobileSign (e) {
            e.preventDefault();
            this.mobileLoading = true;
            this.isMobileDis = true
            this.form.validateFields((err, values) => {
                if (!err) {
                    let params = {
                        phoneNumbers: values.phone,
                        code: values.verifyCode,
                        id: this.EntInfo.id
                    };
                    checkVerifiyCode(params).then((res) => {
                        const { code, msg } = res
                        if (code && code === 10) {
                            this.mobileLoading = false
                            this.form.resetFields()
                            this.$message.success("签署成功")
                            this.$store.state.issign = false
                            this.mobileVis = false
                            setIsSign(false)
                            this.getEntBaseInfo()
                        } else {
                            this.mobileLoading = false
                            this.$message.warning(msg)
                        }
                        this.isMobileDis = false
                    })
                } else {
                    this.mobileLoading = false;
                    this.isMobileDis = false
                }
            });
        }
    },
};
</script>
<style lang="less" scoped>
.loading_pos {
    position: fixed;
    top: 50%;
    left: 50%;
}

// 修改加载进度条颜色
#nprogress .bar {
    background: #2a51bc !important; //颜色可修改
}

.ant-pagination-item-active {
    background: #2a51bc !important;
    color: #fff !important;
    border: 0 none !important;

    a {
        color: #fff !important;
    }
}

.ant-modal-mask {
    background-color: rgba(2, 25, 39, 0.8) !important;
}

.ant-table-thead>tr>th {
    background: #f5f7fa !important;
}

.golbar {
    .ant-modal-content {
        border-radius: 32px;
        border: solid 6px #188af1 !important;
    }

    .ant-modal-header {
        height: 60px;
        background-color: #2a51bc;
        border-radius: 24px 24px 0px 0px;
        text-align: center;
    }

    .ant-modal-title {
        color: #fff;
        font-size: @font26;
    }

    .ant-modal-footer {
        margin: 0 24px;
    }

    .top-title {
        text-align: center;
        color: @text-color-303;
        font-size: @font22;
        padding-bottom: 8px;
        border-bottom: 1px solid #e9e9e9;
    }

    .sign {
        .sign-top {
            height: 80px;
            line-height: 80px;
            background-color: #ffffff;
            border: 1px dashed #92a7d6;
            text-align: center;
            border-radius: 4px;

            .btn {
                height: 32px;
                width: 110px;
                border-radius: 16px;
                outline: none;
            }

            .downBtn {
                margin-right: 72px;
            }
        }

        .main {
            background-color: #e4e7ed;
            border-radius: 4px;
            padding: 24px 0;
            width: 100%;
            height: 100%;

            .main_box {
                margin: 0 auto;
                width: 835px;
                background-color: #ffffff;
                padding: 40px;

                .title {
                    font-size: 24px;
                    font-weight: bold;
                    text-align: center;
                    padding-bottom: 20px;
                    border-bottom: 2px solid #ebebeb;
                }

                p {
                    font-size: 16px;
                    text-indent: 2em;
                    line-height: 30px;
                    margin: 20px 0;
                }
            }
        }
    }
}

.xieyi_main {
    line-height: 30px;
    color: #333;
    font-size: 16px;

    p {
        text-indent: 2em;

        &:nth-child(1) {
            margin-top: 20px;
        }
    }

    span {
        font-weight: bold;
    }

    .check_title {
        font-size: 18px;
    }
}
</style>
